<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>weather折线图01</title>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body style="height: 100%;margin: 0">

<div id="contar" style="height: 100%"></div>

<script type="text/javascript">
    var dom = document.getElementById("contar");
    var myChart = echarts.init(dom);

    xdata = []
    ydata = []

    $.ajax({
        url:'http://localhost:8081/api/getNamelist.do',
        type:'GET',
        dataType:'json',
        success:function (data) {
            $.each(data.first,function(i,item){
                xdata.push(item.name);
                ydata.push(item.value)
            })
            showdata()
        }
    })

    option = null

    function showdata() {
       option = {
           xAxis:{
               type:'category',
               boundaryGap:false,
               data:[]
           },
           yAxis:{
               type:'value'
           },
           series:[{
               data:[],
               type:'line',
               areaStyle:{}
           }]
       }

       option.xAxis.data = xdata;
       option.series[0].data = ydata;

       if(option && typeof option === "object"){
           myChart.setOption(option,true)
       }
    }
</script>

</body>
</html>